<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>时钟</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          th:href="@{/css/style.css}" />
</head>
<head >

    <style type="text/css">
        #face {
            width: 600px;
            height: 600px;
            margin: 25px auto;
            background: url("clock.jpg") no-repeat;
            position: relative;
        }

        #second {
            width: 4px;
            height: 200px;
            background-color: #FC5753;
            position: absolute;
            left: 298px;
            top: 100px;
            /* 设置指针的旋转基点为下方中间位置 */
            transform-origin: bottom center;
        }

        #minute {
            width: 10px;
            height: 175px;
            background-color: #0e2218;
            position: absolute;
            left: 295px;
            top: 125px;
            transform-origin: bottom center;
        }

        #hour {
            width: 15px;
            height: 150px;
            background-color: #5948ff;
            position: absolute;
            left: 292px;
            top: 150px;
            transform-origin: bottom center;
        }

        #center {
            width: 30px;
            height: 30px;
            background-color: black;
            position: absolute;
            left: 285px;
            top: 285px;
            border-radius: 50%;
        }

        canvas { border: 5px solid black;
            margin: 20px auto;
            position: relative;
        }

    </style>

    <script>
        setInterval(function() {
            var time = new Date();
            var second = time.getSeconds();
            var minute = time.getMinutes();
            var hour = time.getHours();
            var hourDeg = hour%12*30 + minute*0.5;

            document.getElementById("second").style.transform = "rotate(" + second*6 + "deg)";
            document.getElementById("minute").style.transform = "rotate(" + minute*6 + "deg)";
            document.getElementById("hour").style.transform = "rotate(" + hourDeg + "deg)";
        }, 1000);
    </script>
</head>
<body >

<div id="face" >

    <canvas  id="canvas" width="600px" height="570px" >
        你的浏览器不支持Canvas
    </canvas>
    <div id="hour"></div>   <!-- 时针 -->
    <div id="minute"></div> <!-- 分针 -->
    <div id="second"></div> <!-- 秒针 -->
    <div id="center"></div> <!-- 中心的小圆点 -->

</div>

</body>
</html>